<template>
  <div class="userLikebox">
    <div class="userLike">
      <div class="title">我创建的歌单({{ likePlay.length }})</div>
      <div class="collectPlay">
        <div
          class="paly"
          v-for="(item) in likePlay"
          :key="item.id"
          @click="$router.push({ path: '/listviews', query: { id: item.id } })"
        >
          <!-- <router-link :to="{ path: '/listviews', query: { id: item.id } }"> -->
          <img :src="item.coverImgUrl" alt />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="userLike">
      <div class="title">我收藏的歌单({{ collectPlay.length }})</div>
      <div class="collectPlay">
        <div
          class="paly"
          v-for="(item) in collectPlay"
          :key="item.id"
          @click="$router.push({ path: '/listviews', query: { id: item.id } })"
        >
          <!-- <router-link :to="{ path: '/listviews', query: { id: item.id } }"></router-link> -->
          <img :src="item.coverImgUrl" alt />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getuserPlayList } from '../js/axios'

export default {
  computed: {
    ...mapState(['user']),
  },
  data () {
    return {
      likePlay: [],
      collectPlay: []
    }
  },
  created () {
    this.getuserPlayList(this.user.uid)
  },
  methods: {
    async getuserPlayList (uid) {
      getuserPlayList(uid).then(res => {
        // console.log(res.data)
        res.data.playlist.forEach(item => {
          if (item.ordered) {
            this.collectPlay.push(item)
          } else {
            this.likePlay.push(item)
          }
        });
        console.log(this.likePlay)
        console.log(this.collectPlay)

      })
    },
  },
}
</script>

<style lang="less" scoped>
.userLikebox {
  margin-bottom: 2rem;
  .userLike {
    .title {
      border-bottom: 0.02rem solid red;
      padding: 0.2rem;
      font-size: 0.4rem;
    }
    .collectPlay {
      display: flex;
      flex-wrap: wrap;

      .paly {
        justify-content: space-between;
        width: 25%;
        padding: 0.1rem;
        img {
          width: 100%;
          height: auto;
          border-radius: 0.2rem;
        }
        .name {
          text-align: center;
          //  overflow: scroll;
        }
      }
    }
  }
}
</style>